@keyframes play-sequence {
  /* 第0帧（i=0）：0% */
  0% {
    background-image: url('./img/0.jpg');
  }
  /* 第1帧（i=1）：1/41≈2.439% */
  2.43902439% {
    background-image: url('./img/1.jpg');
  }
  /* 第2帧（i=2）：2/41≈4.878% */
  4.87804878% {
    background-image: url('./img/2.jpg');
  }
  /* 第3帧（i=3）：3/41≈7.317% */
  7.31707317% {
    background-image: url('./img/3.jpg');
  }
  /* 第4帧（i=4）：4/41≈9.756% */
  9.75609756% {
    background-image: url('./img/4.jpg');
  }
  /* 第5帧（i=5）：5/41≈12.195% */
  12.19512195% {
    background-image: url('./img/5.jpg');
  }
  /* 第6帧（i=6）：6/41≈14.634% */
  14.63414634% {
    background-image: url('./img/6.jpg');
  }
  /* 第7帧（i=7）：7/41≈17.073% */
  17.07317073% {
    background-image: url('./img/7.jpg');
  }
  /* 第8帧（i=8）：8/41≈19.512% */
  19.51219512% {
    background-image: url('./img/8.jpg');
  }
  /* 第9帧（i=9）：9/41≈21.951% */
  21.95121951% {
    background-image: url('./img/9.jpg');
  }
  /* 第10帧（i=10）：10/41≈24.390% */
  24.3902439% {
    background-image: url('./img/10.jpg');
  }
  /* 第11帧（i=11）：11/41≈26.829% */
  26.82926829% {
    background-image: url('./img/11.jpg');
  }
  /* 第12帧（i=12）：12/41≈29.268% */
  29.26829268% {
    background-image: url('./img/12.jpg');
  }
  /* 第13帧（i=13）：13/41≈31.707% */
  31.70731707% {
    background-image: url('./img/13.jpg');
  }
  /* 第14帧（i=14）：14/41≈34.146% */
  34.14634146% {
    background-image: url('./img/14.jpg');
  }
  /* 第15帧（i=15）：15/41≈36.585% */
  36.58536585% {
    background-image: url('./img/15.jpg');
  }
  /* 第16帧（i=16）：16/41≈39.024% */
  39.02439024% {
    background-image: url('./img/16.jpg');
  }
  /* 第17帧（i=17）：17/41≈41.463% */
  41.46341463% {
    background-image: url('./img/17.jpg');
  }
  /* 第18帧（i=18）：18/41≈43.902% */
  43.90243902% {
    background-image: url('./img/18.jpg');
  }
  /* 第19帧（i=19）：19/41≈46.341% */
  46.34146341% {
    background-image: url('./img/19.jpg');
  }
  /* 第20帧（i=20）：20/41≈48.780% */
  48.7804878% {
    background-image: url('./img/20.jpg');
  }
  /* 第21帧（i=21）：21/41≈51.219% */
  51.21951219% {
    background-image: url('./img/21.jpg');
  }
  /* 第22帧（i=22）：22/41≈53.658% */
  53.65853658% {
    background-image: url('./img/22.jpg');
  }
  /* 第23帧（i=23）：23/41≈56.097% */
  56.09756097% {
    background-image: url('./img/23.jpg');
  }
  /* 第24帧（i=24）：24/41≈58.536% */
  58.53658536% {
    background-image: url('./img/24.jpg');
  }
  /* 第25帧（i=25）：25/41≈60.975% */
  60.97560975% {
    background-image: url('./img/25.jpg');
  }
  /* 第26帧（i=26）：26/41≈63.414% */
  63.41463414% {
    background-image: url('./img/26.jpg');
  }
  /* 第27帧（i=27）：27/41≈65.853% */
  65.85365853% {
    background-image: url('./img/27.jpg');
  }
  /* 第28帧（i=28）：28/41≈68.292% */
  68.29268292% {
    background-image: url('./img/28.jpg');
  }
  /* 第29帧（i=29）：29/41≈70.731% */
  70.73170731% {
    background-image: url('./img/29.jpg');
  }
  /* 第30帧（i=30）：30/41≈73.170% */
  73.1707317% {
    background-image: url('./img/30.jpg');
  }
  /* 第31帧（i=31）：31/41≈75.609% */
  75.60975609% {
    background-image: url('./img/31.jpg');
  }
  /* 第32帧（i=32）：32/41≈78.048% */
  78.04878048% {
    background-image: url('./img/32.jpg');
  }
  /* 第33帧（i=33）：33/41≈80.487% */
  80.48780487% {
    background-image: url('./img/33.jpg');
  }
  /* 第34帧（i=34）：34/41≈82.926% */
  82.92682926% {
    background-image: url('./img/34.jpg');
  }
  /* 第35帧（i=35）：35/41≈85.365% */
  85.36585365% {
    background-image: url('./img/35.jpg');
  }
  /* 第36帧（i=36）：36/41≈87.804% */
  87.80487804% {
    background-image: url('./img/36.jpg');
  }
  /* 第37帧（i=37）：37/41≈90.243% */
  90.24390243% {
    background-image: url('./img/37.jpg');
  }
  /* 第38帧（i=38）：38/41≈92.682% */
  92.68292682% {
    background-image: url('./img/38.jpg');
  }
  /* 第39帧（i=39）：39/41≈95.121% */
  95.12195121% {
    background-image: url('./img/39.jpg');
  }
  /* 第40帧（i=40）：40/41≈97.560% */
  97.5609756% {
    background-image: url('./img/40.jpg');
  }
  /* 第41帧（i=41）：100% */
  100% {
    background-image: url('./img/41.jpg');
  }
}



.wash-bg {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.casarte-wash {
  .generate-background-images(0, 52, 'https://zhangtaouc-1314929551.cos.ap-nanjing.myqcloud.com/h5/test/casarte/wash');
  animation: play-bg 3.7s linear infinite;
  z-index: 1110;
}

[data-theme='casarte'] {
  .createKeyframes(52, 1, 'https://zhangtaouc-1314929551.cos.ap-nanjing.myqcloud.com/h5/test/casarte/wash');
}

.createKeyframes(@imageNum, @time, @imagePath) when(@time <= 1) {
  .createKeyframes(@imageNum,  @time + 1, @imagePath);
  @keyframes play-bg {
    .loop(@i, @count, @imagePath) when (@i <= @count) {
      @percentage: (@i / @count) * 100%;
      @{percentage} {
        background: url('@{imagePath}/img/@{i}.jpg') no-repeat;
        background-size: 100% 100%;
      }

      .loop(@i + 1, @count, @imagePath);
    }
    .loop(0, @imageNum, @imagePath);
  }
}
.generate-background-images(@i, @count, @imagePath) when (@i <= @count) {
  background-image+: url('@{imagePath}/img/@{i}.jpg');
  .generate-background-images((@i + 1), @count, @imagePath);
}
